<template>
    <div>
        <div class="edu-page-title">筛选条件</div>
        <el-card shadow="never" body-style="padding: 10px;">
            <el-form ref="queryForm" :model="queryForm" label-position="left" label-width="80px">
                <el-row :gutter="24" style="height: 50px;">
                    <el-col :span="8">
                        <el-form-item
                            label="辅修年级:"
                            prop="grade"
                            :error="(queryForm.projId=='1' && !queryForm.grade && !!queryForm.faculty) ? $t('culture.rules.plsChooseGrade'):''"
                        >
                            <el-date-picker
                                v-model="queryForm.grade"
                                value-format="yyyy"
                                type="year"
                                placeholder="选择学年"
                                style="width: 100%"
                                @change="(queryForm.projId=='1') ? queryCampusMajor(queryForm.faculty) : ''"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学院:" prop="faculty">
                            <el-select
                                v-model="queryForm.faculty"
                                filterable
                                style="width: 100%"
                                @change="queryCampusMajor"
                            >
                                <el-option
                                    v-for="item in options.faculty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="培养方案名称:" prop="cultureSchemeName">
                            <el-input v-model="queryForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" class="float-right">
                        <el-form-item class="float-right" label-width="0">
                            <el-button size="mini" @click="reset('queryForm')">重置</el-button>
                            <el-button type="primary" size="mini" @click="onSubmit('queryForm')">筛选</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <div class="edu-page-title mg-top">辅修微专业培养方案</div>
        <el-card v-loading="loading" shadow="never" body-style="padding: 10px;">
            <el-table :data="tableData" fit stripe tooltip-effect="light" style="width: 100%">
                <el-table-column show-overflow-tooltip align="center" label width="30">
                    <template slot-scope="scope">
                        <el-radio
                            v-model="selectRadio"
                            :label="scope.row.id"
                            @change="getSchemeId(scope.row.id)"
                        >&nbsp;</el-radio>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="微专业方案名称" prop="name" width="100">
                    <template slot-scope="scope">
                        <span :title="scope.row.name">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="辅修年级" prop="grade" width="70" />
                <el-table-column show-overflow-tooltip label="学院" prop="facultyI18n" />
                <el-table-column show-overflow-tooltip label="专业" prop="majorI18n" />
                <el-table-column
                    show-overflow-tooltip
                    label="进阶层次"
                    prop="formLearningI18n"
                    width="70"
                />
            </el-table>
            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        :total="queryForm.total"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import * as API from "common/src/api/culture/cultruescheme";
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
import { getGraduateDegreePage } from "common/src/api/resource/course";
export default {
    props: {
        currentSelected: {
            default: null
        },
        projId: {
            default: 1
        },
        isShow: { default: false },
        dialogStatus: {
            default: false
        }
    },
    watch: {
        isShow(newVal, oldVal) {
            if (newVal) {
                this.init();
            }
        }
    },
    name: "SelectCultureScheme",
    data() {
        return {
            loading: false,
            // 筛选相关选项
            queryForm: {
                "x-token": "",
                grade: "", // 年级
                trainingLevel: "", // 培养层次
                faculty: "", // 学院
                major: "", // 专业
                degreeType: "", // 学位类型
                formLearning: "", // 学习形式
                spcialPlan: "", // 专项计划
                studentAbroad: "", // 国际学生
                status: 3, // 状态
                name: "", // 名称
                pageNum_: 1,
                pageSize_: 20,
                total: 0,
                trainingCategory: [],
                campusProfession: ""
            },
            // 下拉相关选项数据
            options: {
                grade: [],
                trainingLevel: [],
                faculty: [],
                major: [],
                degreeType: [],
                spcialPlan: [],
                formLearning: [],
                studentAbroad: [],
                campusProfessions: [],
                status: [],
                trainingCategory: [],
                templateName: []
            },
            tableData: [],
            selectRadio: ""
        };
    },
    methods: {
        queryCampusMajor(val) {
            this.queryForm.major = "";
            this.queryForm.campusProfession = "";
            if (this.queryForm.projId == "1") {
                this.queryCampusProfessions(this.queryForm);
            } else {
                if (val) {
                    this.queryMajors();
                }
            }
        },
        queryCampusProfessions(query) {
            this.options.campusProfessions = [];
            this.queryForm.campusProfession = "";
            // 联动校验
            if (!(query.grade && query.faculty)) {
                return;
            }
            query.category = query.professionCateGory;
            API.findProfessionByParam(query).then(res => {
                if (res.code === 200) {
                    this.options.campusProfessions = res.data.map(
                        (item, index) => {
                            return {
                                label: item.professionCateGoryName,
                                value: item.professionCateGory
                            };
                        }
                    );
                }
            });
        },
        init() {
            this.initOptions();
            this.handleSearch();
        },
        reset(form) {
            this.queryForm.name = "";
            this.options.campusProfessions = [];
            this.options["major"] = [];
            this.$refs[form].resetFields();
            this.handleSearch();
        },
        onSubmit(form) {
            this.handleSearch();
        },
        handSearchChang() {
            // 查询时初始化页码和总数
            this.queryForm.pageNum_ = 1;
            this.queryForm.total = 0;
            this.handleSearch();
        },
        handleSearch() {
            const that = this;
            that.loading = true;
            that.queryForm.projId = this.$props.projId;
            API.findCultureSchemeList(that.queryForm)
                .then(
                    function(res) {
                        that.loading = false;
                        if (res && res.data) {
                            res.data.list.forEach(item => {
                                item.selectRadio = 0;
                            });
                            that.tableData = res.data.list;
                            that.queryForm.total = res.data.total_;
                        }
                    },
                    function(err) {
                        that.loading = false;
                        that.$message.error({
                            showClose: true,
                            message: err.toString(),
                            duration: 2000
                        });
                    }
                )
                .catch(function(error) {
                    that.loading = false;
                    console.log(error);
                    that.$message.error({
                        showClose: true,
                        message: "请求出现异常",
                        duration: 2000
                    });
                });
        },
        getSchemeId(id) {
            this.$emit("schemeId", this.selectRadio);
        },
        initOptions() {
            const _this = this;
            //培养类别数据请求并处理
            queryDic({
                lang: _this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC"]
            })
                .then(res => {
                    let list = [];
                    const pycc = res.data["X_PYCC"];
                    for (var key in pycc) {
                        let obj = {};
                        obj.label = pycc[key];
                        obj.value = key;
                        list.push(obj);
                    }
                    if (_this.projId * 1 !== 1) {
                        // 4:研究生,6:博士
                        list = list.filter(e => {
                            return e.value * 1 == 4 || e.value * 1 == 6;
                        });
                    }
                    _this.options.trainingLevel = list;
                })
                .catch(err => {
                    console.log(err);
                });
            const data = {
                lang: _this.$store.getters.language || "cn",
                type: "allChild",
                keys: [
                    "X_YX",
                    "X_XXXS",
                    "X_ZXJH",
                    "X_PYLB",
                    "X_XWLB",
                    "X_XWLX",
                    "X_GLBM"
                ]
            };
            queryDic(data)
                .then(res => {
                    if (res.code == 200) {
                        UTILS.fillSelect(
                            {
                                faculty: "X_YX",
                                degreeType: "X_XWLX",
                                spcialPlan: "X_ZXJH",
                                formLearning: "X_XXXS",
                                degreeCategory: "X_XWLB",
                                trainingCategory: "X_PYLB",
                                project: "X_GLBM"
                            },
                            res.data,
                            _this.options
                        );
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        changeFaculty(val) {
            this.options["major"] = [];
            this.queryForm.major = "";
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: [val],
                    specilaCode: "XY2ZY"
                }
            };
            queryDic(data)
                .then(res => {
                    if (res.code == 200)
                        UTILS.fillSelect(
                            { major: "G_ZY" },
                            res.data,
                            this.options
                        );
                })
                .catch(error => {
                    console.log(error);
                });
        },
        queryMajors() {
            this.options["major"] = [];
            const data = {
                college: this.queryForm.faculty,
                page: false,
                type: this.queryForm.degreeType
            };
            getGraduateDegreePage(data).then(res => {
                if (res.code === 200) {
                    let majors = _.map(res.data.list, item => {
                        return {
                            value: item.code,
                            label:
                                "cn" !== this.$store.getters.language
                                    ? item.nameEn
                                    : item.name
                        };
                    });
                    majors &&
                        0 < majors.length &&
                        (this.options["major"] = [
                            ...this.options["major"],
                            ...majors
                        ]);
                }
            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.handleSearch();
        },
        dataInit() {
            //数据初始化
            Object.assign(this.$data, this.$options.data());
        }
    },
    created() {
        this.init();
    }
};
</script>

<style scoped></style>
